<template>
  <!-- 详情-附件 -->

  <div class="imageList-box">
    <div
      class="imageList"
      @mouseenter="handleMouseEnter(file)"
      @mouseleave="handleMouseLeave"
      v-for="file in imageList"
      :key="file.id"
    >
      <div
        :class="
          currentfile.fileName == file.fileName && currentfile.id == file.id
            ? 'shade'
            : ''
        "
      ></div>
      <img class="image-thumbnail" :src="file.url" alt="" />
      <!-- <img
        class="image-thumbnail"
        src="http://rwblnjq08.hn-bkt.clouddn.com/805b8289b0724b368ed7905a8382e1bc.jpg"
        alt=""
      /> -->
      <span
        class="image-actions"
        :class="
          currentfile.fileName == file.fileName && currentfile.id == file.id
            ? 'showIcon'
            : ''
        "
      >
        <span class="image-preview" @click="handlePreview(file)">
          <el-icon><el-icon-zoom-in /></el-icon>
        </span>
      </span>
    </div>
  </div>

  <div class="documentList" v-for="file in documentList" :key="file.id">
    <div class="name" @click="downloadFile(file)">{{ file.fileName }}</div>
  </div>
  <!-- </div> -->
  <el-dialog v-model="dialogVisible" width="70%">
    <!-- <img :src="dialogImageUrl" alt="Preview Image" w-full /> -->
    <el-image :src="dialogImageUrl" fit="cover"></el-image>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      currentfile: '',
      fileList: [],
      imageList: [],
      documentList: []
    }
  },
  props: {
    files: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  watch: {
    files: {
      handler (newVal) {
        if (newVal) {
          this.documentList = []
          this.imageList = []
          newVal.forEach(item => {
            if (this.isImage(item.fileName)) {
              this.imageList.push(item)
            } else {
              this.documentList.push(item)
            }
            // this.fileList = [...this.imageList, ...this.documentList]
          })
        }
      },
      immediate: true
    }

  },
  methods: {
    handleMouseEnter (file) {
      this.currentfile = file
    },
    handleMouseLeave () {
      this.currentfile = ''
    },
    // 判断是否是图片
    isImage (file) {
      if (file) {
        let arr = file.split('.')
        let type = arr[arr.length - 1]
        let imageType = 'jpg/png/jpeg/svg'
        if (imageType.includes(type)) {
          return true
        } else {
          return false
        }
      }

    },
    handlePreview (uploadFile) {
      // window.open(uploadFile.url)
      this.dialogImageUrl = uploadFile.url
      this.dialogVisible = true
    },
    // 下载文件
    downloadFile (file) {
      const a = document.createElement('a')
      a.target = "_blank"
      a.href = file.url
      a.download = file.fileName // 下载文件的名称
      a.style.display = 'none'
      // 隐藏a标签
      document.body.appendChild(a)       // 将a标签追加到文档对象中
      a.click()                          // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove()                        // 一次性的，用完就删除a标签

    }
  }
}
</script>

<style lang='scss' scoped>
.imageList-box {
  display: flex;
}
.imageList {
  position: relative;
  width: 80px;
  height: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
  .image-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
  }
  .image-actions {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .el-icon {
      font-size: 20px;
      color: #fff;
    }
  }
  .showIcon {
    display: block;
  }
  .image-preview {
    margin-right: 5px;
  }
  .shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: #33333363;
  }
}

.documentList {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .name {
    margin-right: 30px;
    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .image-actions {
    display: none;
  }
  .el-icon {
    // margin-top: 12px;
    vertical-align: middle;
  }
  .showIcon {
    display: block;
  }
}
.el-upload-list__item:hover {
  background-color: transparent;
}
.el-upload-list {
  // display: flex;
}
</style>

